import React from 'react';
import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
import { useTheme, useThemeColors } from '@gaozh1024/rn-toolkit';

const ThemeToggle: React.FC = () => {
    const { isDark, toggleDarkMode } = useTheme();
    const colors = useThemeColors();

    const styles = StyleSheet.create({
        container: {
            flexDirection: 'row',
            alignItems: 'center',
            justifyContent: 'space-between',
            padding: 16,
            backgroundColor: colors.surface,
            borderRadius: 12,
            marginVertical: 8,
        },
        label: {
            fontSize: 16,
            fontWeight: '500',
            color: colors.text,
        },
        toggleContainer: {
            flexDirection: 'row',
            backgroundColor: colors.border,
            borderRadius: 20,
            padding: 2,
        },
        toggleButton: {
            paddingHorizontal: 16,
            paddingVertical: 8,
            borderRadius: 18,
            minWidth: 60,
            alignItems: 'center',
        },
        activeToggle: {
            backgroundColor: colors.primary,
        },
        inactiveToggle: {
            backgroundColor: 'transparent',
        },
        toggleText: {
            fontSize: 14,
            fontWeight: '500',
        },
        activeText: {
            color: '#FFFFFF',
        },
        inactiveText: {
            color: colors.textSecondary,
        },
    });

    return (
        <View style={styles.container}>
            <Text style={styles.label}>主题模式</Text>
            <View style={styles.toggleContainer}>
                <TouchableOpacity
                    style={[
                        styles.toggleButton,
                        !isDark ? styles.activeToggle : styles.inactiveToggle,
                    ]}
                    onPress={toggleDarkMode}
                >
                    <Text
                        style={[
                            styles.toggleText,
                            !isDark ? styles.activeText : styles.inactiveText,
                        ]}
                    >
                        浅色
                    </Text>
                </TouchableOpacity>
                <TouchableOpacity
                    style={[
                        styles.toggleButton,
                        isDark ? styles.activeToggle : styles.inactiveToggle,
                    ]}
                    onPress={toggleDarkMode}
                >
                    <Text
                        style={[
                            styles.toggleText,
                            isDark ? styles.activeText : styles.inactiveText,
                        ]}
                    >
                        深色
                    </Text>
                </TouchableOpacity>
            </View>
        </View>
    );
};

export default ThemeToggle;